<template>
	<div :class="props.class">
		<div class="control-header" v-if="showHeader()">
			<div class="control-header__left" v-if="hasSlot('titleBar')">
				<slot name="titleBar"></slot>
			</div>
			<div
				class="control-header__right"
				v-if="
					hasSlot('quickGroup') || hasSlot('quickSearch') || hasSlot('toolbar')
				"
			>
				<div
					class="control-header__right__quickgroupsearch"
					v-if="hasSlot('quickGroup')"
				>
					<slot name="quickGroup"></slot>
				</div>
				<div
					class="control-header__right__quicksearch"
					v-if="hasSlot('quickSearch')"
				>
					<slot name="quickSearch"></slot>
				</div>
				<div class="control-header__right__toolbar" v-if="hasSlot('toolbar')">
					<slot name="toolbar"></slot>
				</div>
			</div>
		</div>
		<div class="control-content">
			<slot></slot>
		</div>
	</div>
</template>

<script setup lang="ts">
import { expBarProps } from './exp-bar';
const split = ref(0.3);
const props = defineProps(expBarProps);
const hasSlot = (name: string): boolean => {
	return !!useSlots()[name];
};
const showHeader = () => {
	return (
		hasSlot('titleBar') ||
		hasSlot('quickGroup') ||
		hasSlot('quickSearch') ||
		hasSlot('toolbar')
	);
};
</script>
